// components/input-form/index.js
import { uploadFile } from '../../api/common.js'
const app = getApp()
// import REG from "../../utils/reg";
Component({
  /**
   * 组件的属性列表
   */
  options: {
    styleIsolation: 'shared'
  },
  properties: {
    inputObj:{ //form单个对象
      type:Object,
      value:{},
      observer: function (newVal, oldVal) {
        if (newVal!=null&&newVal.hasOwnProperty('errTitle')){ // 有报错信息
          if (newVal.errTitle!='') {
            this.setData({ text: newVal.errTitle })
            newVal.errTitle = ''
            this.returnData()
          }
        }
        if (newVal.formType == "select"){//下拉框
          let arr = [];
          let multiIndex=0
          newVal.optionList.forEach((e,i)=>{
            arr.push(e.title)
            if (e.status == '1'){
              multiIndex=i
            }
            if (i == newVal.optionList.length-1){
              this.setData({ ['multiArray[0]']: arr, multiIndex: [multiIndex] })
            }
          })
        }
        if (newVal.formType == "input_att" && newVal.value!=''){//图片列表
          let imgs = newVal.value.split(',');
          this.setData({ imgUrl: imgs, imageList: imgs })
        }
      }
    },
    formIndex:{//form列表下当前对象index
      type:Number,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    multiArray: [[]], //下拉列表数组
    multiIndex: [0],//下拉列表选中的值
    imgUrl:[], // 图片列表（本地）
    imageList: [], // 图片列表(线上)
    text:'', // 报错信息
    newValue:'',//新value值
    timestamp:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //将数据返回到父组件
    returnData(){
      let { formIndex, inputObj } = this.data
      this.triggerEvent('getCompSetData', { formIndex: formIndex, inputObj: inputObj })
    },
    //获取input输入框的值，数据判断，但不更新
    getValue(e) {
      let { inputObj } = this.data
      let { minLength, maxLength } = inputObj
      let value = app.removeBlank(e.detail.value)
      let text = "";
      if (value.length == 0 && inputObj.required == 1) {//必填时没有填
        text = `请输入${inputObj.title}`;
      }else if (minLength > 0 && value.length < minLength) {//最小长度不为0且输入的内容长度低于设定值
        text = `${inputObj.title}长度不能少于${minLength}位`;
      } else if (maxLength > 0 && value.length > maxLength) {//最大长度不为0且输入的内容长度超过设定值
        text = `${inputObj.title}长度不能多于${maxLength}位`;
        value.substr(maxLength)
      }
      this.setData({ text: text, timestamp: new Date().valueOf() })
      if (new Date().valueOf()-this.data.timestamp>200){
        this.setInputValue(e)
      }
    },
    setInputValue(e) {
      this.setData({ ['inputObj.value']: app.removeBlank(e.detail.value) })
      this.returnData()
    },

    // 下拉列表选择
    bindPickerChange(e) {
      this.setOptionList(e.detail.value+'')
    },
    // 多选项选择
    checkboxChange(e) {
      let str = ''
      let arr = e.detail.value
      arr.forEach((e,i)=>{
        str += Number(e) + (i < arr.length-1?',':'')
      })
      this.setOptionList(str)
    },

    // 单选项选择
    radioChange(e) {
      this.setOptionList(e.detail.value)
    },

    //设置列表选中的
    setOptionList(value) {
      value = value.split(',')//选中的数组下标
      let { optionList } = this.data.inputObj
      optionList.forEach((e, i) => {//全部设置为初始值
        e.status = ''
      })
      optionList.forEach((e, i) => {
        value.forEach(q => {
          if(i==q){
            e.status = '1'
          }
        })
      })
      this.setData({ ['inputObj.optionList']: optionList })
      this.returnData()
    },

     // 选择图片
    chooseImage(e) {
      wx.previewImage({
        current: e.currentTarget.dataset.src, // 当前显示图片的http链接  
        urls: this.data.imgUrl // 需要预览的图片http链接列表  
      })
    },

    //添加图片
    addImage() {
      let _this = this;
      let { imageList, inputObj } = this.data
      let { num } = inputObj
      wx.chooseImage({
        count: num - imageList.length, // 可用数-当前数
        success: res => {
          _this.setData({ imageList: [...imageList, ...res.tempFilePaths] })
          res.tempFilePaths.forEach(e => {
            _this._uploadFile(e)
          })
        }
      })
    },

 // 删除图片
    delImage(e) {
      let index = e.currentTarget.dataset.index;
      wx.showModal({
        title: '删除图片',
        content: '确定要删除第' + Number(index + 1) + '张图片？',
        showCancel: true, //是否显示取消按钮
        cancelText: "否", //默认是“取消”
        cancelColor: '#1781FF', //取消文字的颜色
        confirmText: "是", //默认是“确定”
        confirmColor: '#1781FF', //确定文字的颜色
        success: res => {
          if (!res.cancel) {
            //点击确定
            let { imageList, imgUrl } = this.data
            imageList.splice(index, 1)
            imgUrl.splice(index, 1)
            this.setData({imageList,imgUrl})
            this.setImgList()
          }
        }
      })
    },

    //设置图片数据返回
    setImgList(){
      let str = ''
      let { imgUrl, inputObj } = this.data;
      imgUrl.forEach((e,i)=>{
        str += `${e}${i < imgUrl.length-1?',':''}`
      })
      this.setData({ ['inputObj.value']: str})
      if (imgUrl.length > 0) {
        this.setData({ text: '' })
      }else{
        this.setData({ text: '请上传' + inputObj.title })
      }
      this.returnData()
    },

    // 文件上传
    _uploadFile(img) {
      uploadFile(img, 'file', res => { // 图片上传成功
        let data = JSON.parse(res.data)
        if (data.code != 0) {
          this.showToast('图片上传失败', 'none')
        } else {
          this.setData({ ['imgUrl[' + this.data.imgUrl.length + ']']: data.url })
          this.setImgList()
        }
      }, err => { // 图片上传失败
        this.showToast('图片上传失败', 'none')
      })
    }
  },
  lifetimes: {
    attached: function () {
    }
  }
})
